<template>
  <div class="recommend">
    <headerC :islogin="$store.state.ifLogin"></headerC>
    <div class="recommend-all">
        <div>
          <div class="lefts">
            <ul>
              <li class="li1">
                <el-input placeholder="搜索频道" suffix-icon="el-icon-search"></el-input>
              </li>
              <li class="li2">
                <span>发现频道</span>
                <span>></span>
              </li>
              <li :class="{ 'li3': true,'li3-style': isli3style }">
                <div class="li3-div" v-for="item in arrys" :key="item.id" @click="jumprouter( item.id, item.name )">
                  <span class="text"> {{item.name}} </span>
                  <!-- <span class="num"> {{item.total}} </span> -->
                  <span class="num"> {{ item.name === '全部'? '' : item.total}} </span>
                </div>
              </li>
              <li class="li4" v-if="!isli3style" @click="updateIsli3style">
                <span>展开 <i class="el-icon-arrow-down"></i></span>
              </li>
              <li class="li4s li4" v-if="isli3style" @click="updateIsli3style">
                <span>收起 <i class="el-icon-arrow-up"></i></span>
              </li>
              <!-- <li class="li5">
                <span>我的订阅</span>
                <span class="right">15</span>
              </li>
              <li></li> -->
            </ul>
          </div>
        </div>
      

      <!-- 组件 -->
      <typeright :qians="righttype" :qianname="righttypeName"></typeright>
      <!-- 组件结束 -->
      

    </div>
  </div>
</template>

<script>
import headerC from '../../../components/harderC'
import typeright from '../../../pages/typeright'

import { artices } from '../../../api/blog'
import { getTypeListAPI } from '../../../api/recommendone'
export default {
  components: {
    headerC,
    typeright
  },
  data() {
    return {
      iflogins: null,
      isli3style: false,
      newlist: [],
      arrys: [],
      righttype: 1,
      righttypeName: '全部'
    }
  },
  methods: {
    VuexLogin() {
      JSON.parse(window.localStorage.getItem('user'))
        ? this.$store.commit('updateifLogin', true)
        : this.$store.commit('updateifLogin', false)
    },
    updateIsli3style() {
      this.isli3style = !this.isli3style
    },
    async getnewlist() {
      const res = await artices()
      this.newlist = res.data.list
    },
    jumprouter(routers, name) {
      this.righttype = routers
      this.righttypeName = name
    },
    async getTypeList() {
      const res = await getTypeListAPI()
      this.arrys = res.data.data || []
    }
  },
  mounted() {
    this.VuexLogin()
    this.getnewlist()
    this.getTypeList()
  }
}
</script>

<style lang="scss" scoped>
.recommend{
  background-color: #455757;
}
.recommend-all{
  display: flex;
  justify-content: space-between;
}
.lefts{
  background-color: #fff;
  padding: 20px;
  width: 330px !important;
  height: 100vh;
  position: sticky;
  left: 0;
  top: 0px;
  ul{
    width: 100%;
    li{
      
      margin-top: 20px;
    }
  }
}
.li2{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}

.li3{
  display: flex;
  flex-wrap: wrap;
  height: 120px;
  // background-color: red;
  overflow: hidden;
  .li3-div{
    width: 140px;
    // margin-bottom: 20px; 
    padding: 10px;
    cursor: pointer;
    .text{}
    .num{
      margin-left: 10px;
      font-size: 13px;
      color: rgb(197, 197, 197);
    }
  }
  .li3-div:hover{
    background-color: aliceblue;
  }
}

.li4{
  color: rgb(197, 197, 197);
  text-align: center;
  border-bottom: 1px solid rgb(197, 197, 197);
  padding: 9px;
}

.li5{
  font-size: 18px;
  .right{
    font-size: 13px;
    color: rgb(197, 197, 197);
    margin-left: 15px;
  }
}

.li3-style{
  height: auto !important;
}
// ===============================

</style>